<template>
  <div class="user-manage-view">
    <el-row :gutter="30">
      <el-col :span="9">
        <div class="user-manage-left"
             v-loading="isLoading"
             element-loading-text="数据加载中"
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(21, 29, 54, 0.8)"
        >
          <div class="user-manage-left-top">
            <div class="left-top-info">
              <h3>应用列表</h3>
              <el-button type="primary" class="add-button" @click="addUser">新增用户</el-button>
            </div>
            <div class="left-top-seach">
              <el-input placeholder="请输入内容" v-model="userSeach" class="input-with-select">
                <el-button slot="append" @click="findUser">查询</el-button>
              </el-input>
            </div>
          </div>
          <div class="user-manage-left-bottom">
            <div class="user-table">

            </div>
            <div class="user-paging">
              <el-pagination
                layout="prev, pager, next"
                :page-size="8"
                :total="total"
                :page-count="10"
                @current-change="changePage"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="15">
        <div class="user-manage-right">
          <div class="user-manage-right-top">
            <div class="right-top-info-edit">
              <h3>应用信息</h3>
              <el-button type="primary" class="edit-button" @click="addNewRole">添加角色</el-button>
            </div>
            <div class="right-top-base-info">
              <span>基本信息</span>
            </div>
          </div>
          <div class="user-manage-right-bottom">

          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

  export default {

    components: {
      // name
    },
    name: "userManageView",
    props: {
      isLoading: {
        type: Boolean,
        default: false
      },
      total: {
        type: Number,
        default: 10
      }
      // msg: String //  [name: typeof]
    },
    filters: {},
    computed: {},
    watch: {},
    data() {
      return {
        userSeach: ''
      }
    },
    created() {

    },
    mounted() {

    },
    methods: {
      addUser() {
        this.$emit('addUser');
      },
      findUser() {
        this.$emit('findUser');
      },
      changePage() {
        this.$emit('changePage');
      },
      addNewRole() {
        this.$emit('addNewRole');
      }
    },
    destroyed() {

    }
  }
</script>

<style scoped lang="less">
  @import url("./userManage");
</style>
